<!DOCTYPE html>
<html lang="zh-CHS">

<head>
    <meta charset="UTF-8" />
    <title>moyu</title>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,viewport-fit=cover">
    <meta http-equiv="Cache-Control" content="no-cache">
    <link rel="stylesheet" href="./styles/vant.css" />
    <link rel="stylesheet" href="./styles/main.css" />
</head>

<body>
    <div id="app" class="layout">
        <van-notice-bar color="#92C2F3" background="#ecf9ff" left-icon="volume-o" :text="aGreet"></van-notice-bar>

        <van-cell-group>
            <van-cell title="当前时间" v-cloak>{{ currentTime }}</van-cell>

            <van-cell title="午饭时间" v-cloak>
                <van-radio-group direction="horizontal" v-model="dinnerTime" @change="changeDinnerTime">
                    <van-radio :name="35">35分</van-radio>
                    <van-radio :name="55">55分</van-radio>
                </van-radio-group>
            </van-cell>

            <van-cell title="早上打卡时间" v-cloak>
                <van-stepper :min="15" :max="60" v-model="startTime" @change="computeEndTime"></van-stepper>
            </van-cell>
            <van-cell title="晚上打卡时间（最早）" v-cloak>{{ endTime }}</van-cell>
            <van-cell title="距离下次放假还有" v-cloak>{{ nextHoliday }}天</van-cell>
        </van-cell-group>

        <div class="weather" v-if="weather.future.length">
            <div class="weather__today">
                <div class="weather__today__aside">
                    <img :src="weatherImg[weather.today.type]">
                    <span v-cloak>空气质量{{ weather.today.quality }}</span>
                    <span v-cloak>湿度 {{ weather.today.shidu }}</span>
                    <span v-cloak>{{ weather.today.ganmao }}</span>
                </div>
                <div class="weather__today__content" v-cloak>
                    <div class="item__text">{{ weather.today.ymd }} {{ weather.today.week }}</div>
                    <div class="item__text"> <span>{{ weather.today.wendu }}</span>℃ </div>
                    <div class="item__text">{{ weather.today.type }} {{ weather.today.fx }} {{ weather.today.fl }}</div>
                    <div class="item__text">{{ weather.today.high }} / {{ weather.today.low }}</div>
                    <div class="item__text">{{ weather.today.notice }}</div>
                </div>

            </div>
            <div class="weather__future">
                <div class="item" v-for="(item,index) in weather.future" :key="index" v-cloak>
                    <div class="item__text">{{ item.ymd }} ({{ item.week }}) </div>
                    <div class="item__text"><img :src="weatherImg[item.type]"></div>
                    <div class="item__text">{{ item.type }} {{ item.fx }} {{ item.fl }}</div>
                    <div class="item__text">{{ item.high }} / {{ item.low }}</div>
                    <div class="item__text">{{ item.notice }}</div>
                </div>
            </div>
        </div>

        <van-steps direction="vertical" active-color="#07c160" inactive-color="#969799" :active="0">
            <template v-for="(item,index) in holidayList">
                <van-step :key="index" v-if="item.type" v-cloak>
                    <van-cell class="holiday-item" :title="item.holidayName"
                        :label="`${item.holidayStartTime}（共${item.restDay.length}天）`">
                        <span>倒计时 {{ item.downTime }} 天</span>
                    </van-cell>
                </van-step>
            </template>
        </van-steps>

        <div class="layout__company">@ 立林前端开发组</div>
    </div>
</body>

</html>
<script src="./scripts/axios.min.js"></script>
<script src="./scripts/vue.min.js"></script>
<script src="./scripts/dayjs.min.js"></script>
<script src="./scripts/vant.min.js"></script>
<script src="./scripts/app.js"></script>